<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品分类</a></el-breadcrumb-item>
    </el-breadcrumb>
    
    <el-card>
      <!-- 搜索 -->
      <!-- <el-form :inline="true" :model="tbCategory" class="demo-form-inline">
        <el-form-item label="分类名称">
          <el-input v-model="tbCategory.name" placeholder="分类名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="排序">
         <el-input v-model="tbCategory.seq" placeholder="排序" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCategoryList()" size="small" plain>查询</el-button>
        </el-form-item>
      </el-form> -->
      <!-- 显示数据的表格 -->
      <el-table
          :data="CategoryTabData"
          style="width: 100%" border>
          <el-table-column
            label="Id"
            prop="id" width="80">
          </el-table-column>
          <el-table-column
            label="分类名称"
            prop="name" width="200">
          </el-table-column>
          <el-table-column
            label="级别" width="80">
            <template>
              {{parentIds.length+1}}
            </template>
          </el-table-column>
          <el-table-column
            label="商品数量"
            prop="goodsNum" width="80">
          </el-table-column>
          <el-table-column
            label="数量单位" width="80"> 件
          </el-table-column>
          <el-table-column
            label="导航栏" width="120">
            <template slot-scope="scope">
              <el-switch
              v-model="scope.row.isMenu"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"  @change="changeSwitch(scope.row);scope.row.isMenu == '1' ? $message.success('导航栏展示'): $message.error('取消展示')">
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="是否显示" width="120">
            <template slot-scope="scope">
              <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0" @change="changeSwitch(scope.row);scope.row.isShow == '1' ? $message.success('显示'): $message.error('取消')">
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="排序"
            prop="seq" width="80">
          </el-table-column>
          <el-table-column
            label="设置 ">
            <template slot-scope="scope">
              &nbsp;&nbsp;<el-button size="mini" plain @click="addSubordinate(scope.row)" type="success">添加下级</el-button> &nbsp;&nbsp;
              <el-button size="mini" plain @click="querySubordinate(scope.row)" type="primary">查看下级</el-button> &nbsp;&nbsp;
              <el-button size="mini" plain @click="querySuperior(scope.row)" type="primary">查看上级</el-button> &nbsp;&nbsp;
              <el-tooltip class="item" effect="dark" content="请您谨慎置换" placement="right">
              <el-button size="mini" plain @click="updateSubordinate(scope.row)" type="warning">置换商品</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            align="right" width="180">
          <!-- 操作 -->
            <template slot="header">
              <el-form ref="form" :model="tbCategory" label-width="auto" size="small">
                <el-form-item>
                    <el-input v-model="tbCategory.name" placeholder="分类名称" @input="getCategoryList()"></el-input>
                </el-form-item>
              </el-form>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showCategory(scope.row)" plain>Edit</el-button>
                <el-tooltip class="item" effect="dark" content="数据删除无法修复" placement="bottom-end">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)" plain>Delete</el-button>
               </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      <!-- 分页插件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
     <!-- 添加修改 -->
      <el-drawer
        :title="title"
        :visible.sync="dialogVisible"
        :direction="direction"
        :before-close="handleClose">
        <!-- 新增/修改表单 -->
        <el-card>
          <el-form :model="showCategoryData" label-width="auto" class="demo-ruleForm">
              <el-form-item label="分类名称:">
                <el-input v-model="showCategoryData.name" @input="e => showCategoryData.name = validForbid (e)" placeholder="分类名称" maxlength="24"></el-input>
              </el-form-item>
              <el-form-item label="上级分类" v-if="title=='add'">
                <el-select placeholder="上级分类" v-model="showCategoryData.parentId">
                  <el-option
                  :label="showParentClassify.name" :value="showParentClassify.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序:">
                <el-input v-model="showCategoryData.seq" type="number"  @input="showCategoryData.seq=showCategoryData.seq.replace(/^(0+)|[^\d]+/g, '')" placeholder="排序"></el-input>
              </el-form-item>
              <el-form-item label="是否显示:">
                <el-switch
                  v-model="showCategoryData.isShow"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-form-item>
              <el-form-item label="是否显示在显示栏:">
                 <el-switch
                  v-model="showCategoryData.isMenu"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-form-item>
              <el-form-item label="请选择模板:">
                  <el-select placeholder="模板" v-model="showCategoryData.templateId">
                  <el-option
                  v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button plain type="primary" @click="SavaAndupdate()">提交</el-button>
                <el-button plain @click="clearCategoryData()">取消</el-button>
              </el-form-item>
          </el-form>
        </el-card>
      </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tbCategory: { // 查询条件
        parentId: 0
      },
      parentIds: [], // 级别
      CategoryTabData: [], // 回显数据
      pageNum: 0, // 页号
      pageSize: 8, // 页大小
      total: 0, // 总页数
      dialogVisible: false,
      title: 'add',
      showCategoryData: {}, // 新增修改的数据
      direction: 'rtl',
      templateList: [], // 模板数据
      showParentClassify: []
    }
  },
  created () {
    this.getCategoryList()
  },
  methods: {
    // 置换
    updateSubordinate (row) {
      alert('待完善功能')
    },
    // 修改switch状态
    async changeSwitch (row) {
      this.showCategoryData = row
      // 调用新增/修改的方法
      this.SavaAndupdate()
    },
    // 新增和修改时所需的数据
    async createdData () {
      const { data: res } = await this.$http.get('/goods/template/list')
      this.templateList = res.data.list
    },
    // 添加下级
    async addSubordinate (row) {
      if (this.parentIds.length === 3) {
        this.clearCategoryData()
        this.$message.warning('抱歉,限制为三级分类')
      } else {
        this.showParentClassify = row
        this.createdData()
        this.dialogVisible = true
      }
    },
    // 查看上级
    querySuperior (row) {
      if (this.parentIds.length > 0) {
        // 得到刚刚查看下级时添加的parentId
        this.tbCategory.parentId = this.parentIds[this.parentIds.length - 1]
        // 根据id去查询上级联动则需清空 parentId,否则造成数据的混乱
        this.parentIds.splice(this.parentIds.length - 1, 1)
        this.pageNum = 1
        this.getCategoryList()
      } else {
        this.$message.info('抱歉,已经是顶层了')
      }
    },
    // 查看下级
    querySubordinate (row) {
      if (this.parentIds.length < 2) {
        // 这个存储用于返回上一级
        this.parentIds.push(this.tbCategory.parentId)
        this.tbCategory.parentId = row.id
        this.pageNum = 1
        // console.log(this.tbCategory)
        this.getCategoryList()
      } else {
        this.$message.info('抱歉,已经是低层了')
      }
    },
    // add/update 退出取消
    handleClose (done) {
      this.clearCategoryData()
    },
    // 分页
    async getCategoryList () {
      const { data: res } = await this.$http.post(`/goods/category/pageQueryByAll/${this.pageNum}/${this.pageSize}`, this.tbCategory)
      // console.log(res, this.pageSize, this.pageNum)
      this.CategoryTabData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.getCategoryList()
    },
    // 切换页
    handleCurrentChange (newPageNo) {
      this.pageNum = newPageNo
      this.getCategoryList()
    },
    // 删除
    async handleDelete (row) {
      const { data: res } = await this.$http.delete(`/goods/category/delete/${row.id}`)
      if (res.success) {
        this.$message.warning('删除成功')
        this.getCategoryList()
      }
    },
    // 回显数据
    async showCategory (row) {
      this.dialogVisible = true
      this.title = 'update'
      const { data: res } = await this.$http.get(`/goods/category/detail/${row.id}`)
      console.log(res)
      if (res.success === true) {
        this.showCategoryData = res.data.tbCategory
      }
      this.createdData()
    },
    clearCategoryData () {
      this.dialogVisible = false
      this.title = 'add'
      this.showCategoryData = {}
      this.getCategoryList()
    },
    // 新增
    async addCategory () {
      await this.$http.post('/goods/category/addCategory', this.showCategoryData)
    },
    async handleEdit () {
      await this.$http.put('/goods/category/update', this.showCategoryData)
    },
    // 新增/修改的提交
    SavaAndupdate () {
      // 通过点击事件传参，id判断做那个操作
      if (!this.showCategoryData.id) {
        this.addCategory()
      } else {
        this.handleEdit()
      }
      this.clearCategoryData()
    }
  }
}
</script>

<style scoped>

</style>